<template>
  <navigation class="fixed top-0 left-0 right-0 z-50"></navigation>
  <div class="min-h-screen bg-gray-50 ">
    <div class="container mx-auto px-4 py-20">
      <h1 class="text-3xl font-bold text-gray-800 mb-6">职位推荐</h1>

      <!-- 搜索栏 -->
      <div class="mb-6">
        <div class="flex shadow-sm rounded-lg overflow-hidden">
          <input
            type="text"
            placeholder="搜索职位、公司或关键词"
            class="flex-grow border-none px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
            v-model="searchQuery"
          />
          <button
            class="bg-blue-500 text-white px-6 py-3 hover:bg-blue-600 transition duration-300 whitespace-nowrap"
            @click="searchJobs(searchQuery)"
          >
            搜索职位
          </button>
        </div>
      </div>

      <!-- 筛选条件 -->
      <div class="mb-6 bg-white p-4 rounded-lg shadow-sm border border-gray-200">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <!-- 工作地点 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">工作地点</label>
            <el-select
              v-model="locationFilter"
              placeholder="选择工作地点"
              class="w-full"
              clearable
            >
              <el-option
                v-for="location in locations"
                :key="location"
                :label="location"
                :value="location"
              />
            </el-select>
          </div>
          
          <!-- 工作类型 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">工作类型</label>
            <el-select
              v-model="jobTypeFilter"
              placeholder="选择工作类型"
              class="w-full"
              clearable
            >
              <el-option
                v-for="type in jobTypes"
                :key="type.value"
                :label="type.label"
                :value="type.value"
              />
            </el-select>
          </div>
          
          <!-- 薪资范围 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">薪资范围</label>
            <el-select
              v-model="salaryFilter"
              placeholder="选择薪资范围"
              class="w-full"
              clearable
            >
              <el-option
                v-for="range in salaryRanges"
                :key="range.value"
                :label="range.label"
                :value="range.value"
              />
            </el-select>
          </div>
        </div>
        
        <!-- 筛选按钮 -->
        <div class="mt-4 flex justify-end">
          <button
            @click="resetFilters"
            class="mr-2 px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
          >
            重置
          </button>
          <button
            @click="applyFilters"
            class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm font-medium hover:bg-blue-600"
          >
            应用筛选
          </button>
        </div>
      </div>
      
      <!-- 主内容区 -->
      <div class="flex flex-col lg:flex-row gap-6">
        <!-- 左侧3x3小卡片布局 -->
        <div class="w-full lg:w-2/3">
          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
            <!-- 职位卡片循环 -->
            <div 
              v-for="job in filteredJobs" 
              :key="job.id"
             class="bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow cursor-pointer flex flex-col"
              @click="selectJob(job)"
            >
            <div class="p-4 flex-1 flex">
                <!-- 新增的公司图标 -->
                <div class="flex-shrink-0 mr-3">
                  <img 
                    :src="job.companyLogo || '/default-company.png'" 
                    class="w-12 h-12 rounded-md object-cover border border-gray-200"
                  />
                </div>
                
                <!-- 原有内容调整 -->
                <div class="flex-1 min-w-0">
                  <div class="flex justify-between items-start">
                    <h3 class="font-bold text-gray-800 text-lg truncate">{{ job.title }}</h3>
                    <button 
                      @click.stop="toggleFavorite(job.id)"
                      class="text-gray-400 hover:text-yellow-400"
                    >
                      <el-icon :size="20">
                        <StarFilled v-if="isFavorite(job.id)" class="text-yellow-400" />
                        <Star v-else />
                      </el-icon>
                    </button>
                  </div>
                  <p class="text-gray-600 text-sm mt-1">{{ job.company }}</p>
                  <div class="mt-3 flex justify-between items-center">
                    <span class="text-red-500 font-medium">{{ job.salary }}</span>
                    <span class="text-gray-400 text-xs">{{ job.location }}</span>
                  </div>
                  <div class="mt-3 flex flex-wrap gap-2">
                    <span 
                      v-for="tag in job.tags" 
                      :key="tag"
                      class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded"
                    >
                      {{ tag }}
                    </span>
                  </div>
                </div>
              </div>
              
              <!-- 立即申请按钮 -->
              <div class="px-4 pb-4">
                <button 
                  @click.stop="applyJob(job)"
                  class="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition-colors"
                >
                  立即申请
                </button>
              </div>
            </div>
          </div>

          <!-- 分页 -->
          <div class="mt-6 flex justify-center">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="9"
              :total="totalJobs"
              layout="prev, pager, next"
              @current-change="handlePageChange"
            />
          </div>
        </div>

        <!-- 右侧竖排双卡片 -->
        <div class="w-full lg:w-1/3 space-y-6">
          <!-- 热门职位卡片 -->
          <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-bold text-gray-800 flex items-center">
                <el-icon class="mr-2 text-red-500"><TrendCharts /></el-icon>
                热门职位
              </h3>
              <router-link to="/jobs/hot" class="text-sm text-blue-500 hover:underline">查看更多</router-link>
            </div>
            
            <div class="space-y-4">
              <div 
                v-for="hotJob in hotJobs" 
                :key="hotJob.id"
                class="flex items-start p-3 hover:bg-gray-50 rounded-lg cursor-pointer"
                @click="selectJob(hotJob)"
              >
                <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                  <span class="text-blue-600 font-bold">{{ hotJob.rank }}</span>
                </div>
                <div class="flex-1 min-w-0">
                  <h4 class="font-medium text-gray-800 truncate">{{ hotJob.title }}</h4>
                  <p class="text-sm text-gray-500 mt-1">{{ hotJob.company }} · {{ hotJob.salary }}</p>
                </div>
                <span class="text-xs text-gray-400 ml-2">{{ hotJob.views }}浏览</span>
              </div>
            </div>
          </div>

          <!-- 最近浏览卡片 -->
          <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-5">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-bold text-gray-800 flex items-center">
                <el-icon class="mr-2 text-blue-500"><Clock /></el-icon>
                最近浏览
              </h3>
              <button class="text-sm text-gray-500 hover:text-blue-500">清空记录</button>
            </div>
            
            <div class="space-y-4">
              <div 
                v-for="recentJob in recentJobs" 
                :key="recentJob.id"
                class="flex items-center p-3 hover:bg-gray-50 rounded-lg cursor-pointer"
                @click="selectJob(recentJob)"
              >
                <img 
                  :src="recentJob.companyLogo || '/default-company.png'" 
                  class="w-10 h-10 rounded-md object-cover mr-3"
                />
                <div class="flex-1 min-w-0">
                  <h4 class="font-medium text-gray-800 truncate">{{ recentJob.title }}</h4>
                  <p class="text-sm text-gray-500 mt-1">{{ recentJob.company }}</p>
                </div>
                <span class="text-xs text-gray-400">{{ formatTimeAgo(recentJob.viewTime) }}</span>
              </div>
              
              <div v-if="recentJobs.length === 0" class="text-center py-4 text-gray-400">
                暂无浏览记录
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--底部导航栏-->
  <footer class="bg-gray-900 text-gray-100 py-12 px-6 w-full">
  <div class="container mx-auto max-w-6xl">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
      <!-- 关于我们 -->
      <div>
        <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">关于我们</h3>
        <ul class="space-y-6 text-lg">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">公司介绍</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">团队文化</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">加入我们</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">联系方式</a></li>
        </ul>
      </div>
      
      <!-- 产品服务 -->
      <div>
        <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">产品服务</h3>
        <ul class="space-y-6 text-lg">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">人才评价</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">能力培养</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">职业规划</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">企业咨询</a></li>
        </ul>
      </div>
      
      <!-- 资源中心 -->
      <div>
        <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">资源中心</h3>
        <ul class="space-y-6 text-lg">
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">学习资料</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">案例分享</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">行业报告</a></li>
          <li><a href="#" class="text-gray-300 hover:text-white transition-colors duration-200">帮助中心</a></li>
        </ul>
      </div>
      
      <!-- 关注我们 -->
      <!-- 关注我们 -->
<div>
  <h3 class="text-2xl font-bold text-white mb-6 tracking-wide">关注我们</h3>
  <div class="flex space-x-5">
    <a href="#" class="group">
      <img 
        src="/src/assets/img/微信.png" 
        alt="微信"
        class="w-7 h-7 transition-opacity duration-300 group-hover:opacity-80"
      />
    </a>
    <a href="#" class="group">
      <img 
        src="/src/assets/img/微博.png" 
        alt="微博"
        class="w-7 h-7 transition-opacity duration-300 group-hover:opacity-80"
      />
    </a>
    <a href="#" class="group">
      <img 
        src="/src/assets/img/抖音.png" 
        alt="抖音"
        class="w-7 h-7 transition-opacity duration-300 group-hover:opacity-80"
      />
    </a>
  </div>
  <div class="mt-6 text-gray-400 text-sm">
    <p>扫描二维码关注公众号</p>
    <!-- 二维码图片替换 -->
    <div class="mt-2">
      <img 
        src="/src/assets/img/二维码.png" 
        alt="公众号二维码"
        class="w-24 h-24 object-contain"
      />
    </div>
  </div>
</div>
    </div>
    
    <!-- 版权信息 -->
    <div class="border-t border-gray-800 mt-12 pt-8 text-center">
      <p class="text-gray-500 text-sm">© 2024 人才成长指数平台 保留所有权利</p>
      <div class="mt-2 flex justify-center space-x-4 text-xs text-gray-600">
        <a href="#" class="hover:text-gray-300">隐私政策</a>
        <a href="#" class="hover:text-gray-300">服务条款</a>
        <a href="#" class="hover:text-gray-300">法律声明</a>
      </div>
    </div>
  </div>
</footer>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElIcon, ElPagination, ElSelect, ElOption, ElMessage } from 'element-plus'
import { Star, StarFilled, TrendCharts, Clock } from '@element-plus/icons-vue'
import navigation from '../../views/navigation.vue'

// 模拟数据
const jobs = ref([
  { id: 1, title: '高级前端开发工程师', company: '字节跳动', companyLogo: '/src/assets/img/字节跳动.png',salary: '30k-60k·15薪', location: '北京', tags: ['Vue', 'React', 'TypeScript'], views: 1245 },
  { id: 2, title: 'AI算法专家', company: '腾讯科技',companyLogo: '/src/assets/img/腾讯-01.png', salary: '50k-80k·16薪', location: '深圳', tags: ['机器学习', '深度学习'], views: 892 },
  { id: 3, title: 'Java后端开发', company: '阿里巴巴',companyLogo: '/src/assets/img/阿里巴巴.png' ,salary: '25k-50k·16薪', location: '杭州', tags: ['Spring', 'MySQL'], views: 765 },
  { id: 4, title: '产品经理', company: '美团', companyLogo: '/src/assets/img/美团.png',salary: '20k-40k·15薪', location: '北京', tags: ['Axure', 'PRD'], views: 432 },
  { id: 5, title: 'UI设计师', company: '小米科技', companyLogo: '/src/assets/img/小米.png',salary: '18k-35k·14薪', location: '北京', tags: ['Sketch', 'Figma'], views: 321 },
  { id: 6, title: '测试开发工程师', company: '华为', companyLogo: '/src/assets/img/华为.png',salary: '20k-40k·15薪', location: '深圳', tags: ['自动化测试', 'Python'], views: 287 },
  { id: 7, title: '数据分析师', company: '滴滴出行', companyLogo: '/src/assets/img/滴滴出行.png',salary: '25k-45k·14薪', location: '北京', tags: ['SQL', 'Python'], views: 198 },
  { id: 8, title: '运维工程师', company: '百度', companyLogo: '/src/assets/img/百度.png',salary: '20k-35k·14薪', location: '北京', tags: ['Linux', 'Docker'], views: 154 },
  { id: 9, title: 'Android开发', company: 'OPPO', companyLogo: '/src/assets/img/oppo.png',salary: '18k-30k·14薪', location: '深圳', tags: ['Kotlin', 'Java'], views: 132 }
])

// 筛选条件
const locationFilter = ref('')
const jobTypeFilter = ref('')
const salaryFilter = ref('')

// 筛选选项
const locations = ['北京', '上海', '深圳', '广州', '杭州', '成都', '武汉', '南京']
const jobTypes = [
  { label: '全职', value: 'full-time' },
  { label: '兼职', value: 'part-time' },
  { label: '实习', value: 'internship' },
  { label: '远程', value: 'remote' }
]
const salaryRanges = [
  { label: '10k以下', value: '0-10' },
  { label: '10k-20k', value: '10-20' },
  { label: '20k-30k', value: '20-30' },
  { label: '30k-50k', value: '30-50' },
  { label: '50k以上', value: '50-100' }
]

// 应用筛选
const applyFilters = () => {
  currentPage.value = 1
  ElMessage.success('筛选条件已应用')
}

// 重置筛选
const resetFilters = () => {
  locationFilter.value = ''
  jobTypeFilter.value = ''
  salaryFilter.value = ''
  currentPage.value = 1
  ElMessage.success('筛选条件已重置')
}

// 筛选后的职位列表
const filteredJobs = computed(() => {
  return jobs.value.filter(job => {
    // 工作地点筛选
    if (locationFilter.value && job.location !== locationFilter.value) {
      return false
    }
    
    // 工作类型筛选
    if (jobTypeFilter.value && job.type !== jobTypeFilter.value) {
      return false
    }
    
    // 薪资范围筛选
    if (salaryFilter.value) {
      const [min, max] = salaryFilter.value.split('-').map(Number)
      const jobSalary = parseInt(job.salary)
      if (jobSalary < min || (max && jobSalary > max)) {
        return false
      }
    }
    
    return true
  })
})

//加载状态
const applying = ref(false)

const applyJob = async (job) => {
  applying.value = true
  try {
    await applyForJob(job.id)
    ElMessage.success('申请成功')
    job.applied = true // 更新状态
  } catch (error) {
    ElMessage.error('申请失败')
  } finally {
    applying.value = false
  }
}

const hotJobs = computed(() => {
  return [...jobs.value]
    .sort((a, b) => b.views - a.views)
    .slice(0, 5)
    .map((job, index) => ({ ...job, rank: index + 1 }))
})

const recentJobs = ref([
  { id: 1, title: '前端开发工程师', company: '字节跳动', salary: '25k-50k', viewTime: Date.now() - 3600000, companyLogo: '/src/assets/img/字节跳动.png' },
  { id: 2, title: '产品经理', company: '美团', salary: '20k-40k', viewTime: Date.now() - 86400000, companyLogo: '/src/assets/img/美团.png' }
])

// 搜索和筛选
const searchQuery = ref('')
const currentPage = ref(1)
const totalJobs = ref(100)
const favorites = ref(new Set())

const isFavorite = (jobId) => favorites.value.has(jobId)

const toggleFavorite = (jobId) => {
  if (favorites.value.has(jobId)) {
    favorites.value.delete(jobId)
  } else {
    favorites.value.add(jobId)
  }
}

const selectJob = (job) => {
  // 添加到最近浏览
  const exists = recentJobs.value.some(item => item.id === job.id)
  if (!exists) {
    recentJobs.value.unshift({
      ...job,
      viewTime: Date.now(),
      companyLogo: `/src/assets/img/${job.company}.png`
    })
    if (recentJobs.value.length > 5) {
      recentJobs.value.pop()
    }
  }
}

const searchJobs = (query) => {
  console.log('搜索:', query)
  // 实际项目中这里调用API
}

const handlePageChange = (page) => {
  currentPage.value = page
  // 实际项目中这里调用API获取新页数据
}

const formatTimeAgo = (timestamp) => {
  const seconds = Math.floor((Date.now() - timestamp) / 1000)
  if (seconds < 60) return `${seconds}秒前`
  const minutes = Math.floor(seconds / 60)
  if (minutes < 60) return `${minutes}分钟前`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小时前`
  const days = Math.floor(hours / 24)
  return `${days}天前`
}

onMounted(() => {
  // 初始化数据
})
</script>

<style scoped>
/* 自定义样式 */
.job-card {
  transition: all 0.3s ease;
}
.job-card:hover {
  transform: translateY(-2px);
}

/* 新增图标悬停效果 */
img {
  transition: transform 0.3s ease;
}
.job-card:hover img {
  transform: scale(1.05);
}
</style>